這裡接續上一篇的功能~
回顧上一篇功能：
1.新增按鈕
2.新增矩形
3.矩形顏色隨機顯示

今天新增的一些小功能
1.微調產矩形生位置
2.建立一個createRectangle函式，插入addRectangleButton監聽內

新增let lastRectanglePosition = { left: 50, top: 50 };

讓變數lastRectanglePosition預設值為{ left: 50, top: 50 }, 之後會用到。

const menu = document.getElementById('menu');
const container = document.getElementById('container');
const addRectangleButton = document.getElementById('addRectangle');
const deleteRectangleButton = document.getElementById('deleteRectangle');
const saveStateButton = document.getElementById('saveState');
const loadStateButton = document.getElementById('loadState');
const info = document.getElementById('info');
let lastRectanglePosition = { left: 50, top: 50 };  //新增lastRectanglePosition

微調矩形產生位置

function getRandomOffset() {
    return Math.floor(Math.random() * 50) - 20; // Random offset between -20 and 20
}

說明：
1.隨機浮點數乘以50，會得到一個範圍在 0 到 50 之間的隨機浮點數。例如，生成的隨機數可能是 12.3、49.35 等...
2.Math.floor() 函數會對數字無條件捨去。
3.將隨機整數減去 20，將範圍轉換為 -20 到 20 之間的隨機整數。
4.這樣會生成一個範圍從 -20 到 20 的整數。例如，Math.floor(Math.random() * 50) 生成了 37，那麼 37 - 20 就是 17；如果生成了 10，那麼 10 - 20 就是 -10。

建立一個createRectangle函式，加入addRectangleButton監聽內

addRectangleButton監聽:

addRectangleButton.addEventListener('click', function () {
    console.log(addRectangleButton);
    const rectangle = createRectangle();
    container.appendChild(rectangle);
})

function createRectangle:

function createRectangle() {
    const rectangle = document.createElement('div');
    rectangle.classList.add('rectangle');
    rectangle.style.width = '100px';
    rectangle.style.height = '100px';
    rectangle.style.backgroundColor = getRandomColor();
    return rectangle;  //return to the addRectangleButton
}

說明：

1. document.createElement 方法創建了一個新的 HTML 元素，並將其賦值給變數 rectangle。
2. const 是 JavaScript 中用來定義常量的關鍵字，表示 rectangle 是一個不能重新賦值的變數。
3. rectangle在創建div的同時，新增一個class名稱為rectangle。
4. 將rectangle背景顏色使用getRandomColor()功能，隨機顯示。
5. 點擊addRectangleButton後，將rectangle插入container中。

將微調矩形產生位置，設定的再周延一點

新增一些微調設定的程式碼到createRectangle函式內:

function createRectangle() {
    const rectangle = document.createElement('div');
    rectangle.classList.add('rectangle');
    rectangle.style.width = '100px';
    rectangle.style.height = '100px';
    rectangle.style.backgroundColor = getRandomColor();
    const offsetX = getRandomOffset();
    const offsetY = getRandomOffset();
   
    const newLeft = Math.min(Math.max(0, lastRectanglePosition.left + offsetX), container.clientWidth - 100);
    const newTop = Math.min(Math.max(0, lastRectanglePosition.top + offsetY), container.clientHeight - 100);
    rectangle.style.left = newLeft + 'px';
    rectangle.style.top = newTop + 'px';
    lastRectanglePosition = { left: newLeft, top: newTop };
  
    return rectangle;  //add return add to the addRectangleButton
}

說明:

1. offsetX 和 offsetY 分別代表水平和垂直方向的偏移量，使用隨機生成-20到20之間的函式getRandomOffset()賦予值給他們。
2. lastRectanglePosition.left + offsetX：將上一個矩形的水平位置加上隨機偏移量 offsetX，得到新的水平位置，垂直以此類推。
3. 呼應第2點，這時lastRectanglePosition.left和lastRectanglePosition.top都還是50。
4. Math.max(0, lastRectanglePosition.left + offsetX)：使用 Math.max 確保新產生的矩形位置不會小於 0，也就是說矩形不會移出容器的左邊界。
5. Math.min(..., container.clientWidth - 100)：使用 Math.min 確保新產生的矩形位置不會超過容器的右邊界，container.clientWidth - 100 是容器的寬度減去矩形的寬度（100px），確保矩形不會超出容器的右邊界。
6. lastRectanglePosition = { left: newLeft, top: newTop };內的newLeft 和 newTop：分別是矩形的新水平和垂直位置。
7. 新的newLeft 和 newTop覆蓋掉之前的let lastRectanglePosition = { left: 50, top: 50 };

這樣新產生的矩形就可以在不超出container的情況下隨機產生囉!